<template>
  <div :id="id" :style="style"></div>
</template>

<script>
let echarts = require('echarts')
require('echarts/theme/macarons'); // echarts 主题

export default {
  props: {
    id: {
      type: String,
      default: 'pie-chart'
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      style: {
        width: "325px",
        height: "360px",
        backgroundColor: '#edebec',
        margin: '0',
        borderRadius: '20px'
      }
    };
  },
  computed: {},
  methods: {
    initChart(obj) {
      let info = obj.list
      let legend = obj.legend
      let total = obj.total
      let myChart = new echarts.init(document.getElementById(this.id), 'macarons');
      let option = {
        xAxis: {
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: legend
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
          formatter: '{b} : {c} '
        },
        series: [{
          name: 'show',
          type: 'pie',
          radius: ['38%', '63%'],
          center: ["50%", "40%"],
          seriesLayoutBy: 'row',
          label: {
            show: false,
          },
          data: info
        },
          {
            name: 'hidden',
            radius: ['60%', '67%'],
            type: 'pie',
            seriesLayoutBy: 'row',
            itemStyle: {
              opacity: 0,
            },
          }
        ],
        title: {
          text: this.title,
          x: 'center',
          y: '34%',
          textStyle: {
            fontWeight: 300,
            fontSize: 14,
            color: 'rgba(0,0,0,0.8)'
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '44%',

          style: {
            text: total,
            textAlign: 'center',
            fill: '#000',
            width: 30,
            fontSize: 18,
          }
        }
      };

      myChart.setOption(option);
    }
  }
}
</script>

